<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>性别与年龄分布饼图</title>
    <!-- 引入ECharts库 -->
    <script src="./echarts.min.js"></script>
    <style>
        /* 图表容器样式 */
        #chart-container {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 图表显示容器 -->
    <div id="chart-container"></div>
    
    <script>
        // 初始化ECharts实例，绑定到DOM元素
        var myChart = echarts.init(document.getElementById('chart-container'));
        
        /**
         * 准备数据
         * 数据结构说明：
         * - 外层为性别分类（男、女）
         * - 内层为各性别下的年龄细分
         * - 每个数据项包含name(名称)和value(值)属性
         */
        var data = [
            // 男性数据
            {
                name: '男',
                value: 65,  // 男性总占比65%
                itemStyle: { color: '#5470c6' },  // 男性主色
                children: [
                    {name: '0-18岁', value: 15, itemStyle: { color: '#7b9ce1' }},
                    {name: '19-30岁', value: 20, itemStyle: { color: '#3a56b0' }},
                    {name: '31-45岁', value: 18, itemStyle: { color: '#1e3b8a' }},
                    {name: '46岁以上', value: 12, itemStyle: { color: '#0d2352' }}
                ]
            },
            // 女性数据
            {
                name: '女',
                value: 35,  // 女性总占比35%
                itemStyle: { color: '#ee6666' },  // 女性主色
                children: [
                    {name: '0-18岁', value: 8, itemStyle: { color: '#f8a39e' }},
                    {name: '19-30岁', value: 12, itemStyle: { color: '#d44a42' }},
                    {name: '31-45岁', value: 10, itemStyle: { color: '#a82d26' }},
                    {name: '46岁以上', value: 5, itemStyle: { color: '#7a1c17' }}
                ]
            }
        ];
        
        /**
         * 将层级数据展平为一维数组，用于饼图显示
         * 同时添加自定义视觉样式：
         * - 性别分类使用较深的颜色
         * - 年龄细分使用同色系的渐变色
         */
        var pieData = [];
        data.forEach(function(gender) {
            // 添加性别分类数据
            pieData.push({
                name: gender.name,
                value: gender.value,
                itemStyle: gender.itemStyle,
                label: {
                    fontWeight: 'bold',
                    fontSize: 14
                }
            });
            
            // 添加该性别下的年龄细分数据
            gender.children.forEach(function(age) {
                pieData.push({
                    name: gender.name + '-' + age.name,
                    value: age.value,
                    itemStyle: age.itemStyle
                });
            });
        });
        
        /**
         * 配置图表选项
         */
        var option = {
            // 标题配置
            title: {
                text: '性别与年龄分布',
                left: 'center',
                top: 20,
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            },
            
            // 提示框配置
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    // 格式化提示框内容
                    var name = params.name;
                    var value = params.value;
                    var percent = params.percent;
                    
                    // 判断是否是性别分类还是年龄细分
                    if (name.indexOf('-') === -1) {
                        return `<div style="font-weight:bold">${name}</div>占比: ${value}% (${percent}%)`;
                    } else {
                        var parts = name.split('-');
                        return `<div>
                            <span style="font-weight:bold">${parts[0]}</span> - 
                            <span>${parts[1]}</span>
                        </div>
                        占比: ${value}% (${percent}%)`;
                    }
                }
            },
            
            // 图例配置
            legend: {
                type: 'scroll',  // 可滚动的图例
                orient: 'vertical',
                right: 20,
                top: 'middle',
                textStyle: {
                    fontSize: 12
                }
            },
            
            // 系列配置
            series: [{
                name: '人口分布',
                type: 'pie',
                radius: ['30%', '70%'],  // 设置饼图内外半径，去掉中心圆形
                center: ['50%', '50%'],  // 饼图中心位置
                avoidLabelOverlap: true,  // 防止标签重叠
                
                // 标签配置
                label: {
                    show: true,
                    formatter: function(params) {
                        // 只显示性别分类的名称
                        if (params.name.indexOf('-') === -1) {
                            return params.name + '\n' + params.percent + '%';
                        }
                        return '';
                    },
                    fontSize: 12,
                    lineHeight: 16
                },
                
                // 标签线条配置
                labelLine: {
                    show: true,
                    length: 10,
                    length2: 20
                },
                
                // 强调效果配置
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 14,
                        fontWeight: 'bold'
                    },
                    scale: true,
                    scaleSize: 5
                },
                
                // 数据项配置
                data: pieData
            }]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
        
        // 窗口大小改变时，重新调整图表大小
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>